<template>
  <div>
      <div class="myRow">
        <div>
          <i-button class="myButton" size="small" type="info" ghost icon="md-add-circle" @click="handleSelectAll(true)">新增账户</i-button>
          <i-button class="myButton" size="small" type="success" ghost icon="md-checkmark-circle" @click="handleSelectAll(true)">启用</i-button>
          <i-button class="myButton" size="small" type="error" ghost icon="md-remove-circle" @click="handleSelectAll(true)">禁用</i-button>
        </div>
        <div>
          <Input size="small" suffix="ios-search" placeholder="Enter text" style="width: auto" />
        </div>
      </div>
      <i-table border ref="selection" :columns="columns4" :data="listData.listT"></i-table>
      <div class="footPage">
        <Page :total="100" />
      </div>
  </div>
</template>

<script>
import { GetManagementUserInfoAllInfo } from "@/api/userLogin";
export default {
  name: "home",
  components: {},
  data() {
    return {
      columns4: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "账号",
          key: "loginName"
        },
        {
          title: "角色名称",
          key: "userName"
        },
        {
          title: "部门",
          key: "departmentName"
        },
        {
          title: "账号状态",
          key: "isDelete"
        },
        {
          title: "开通时间",
          key: "address"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data1: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ],
      listData: {}
    };
  },
  mounted() {
    this.getListFun();
  },
  methods: {
    // 获取用户列表数据
    getListFun() {
      const p = {
        pageIndex: "1",
        pageSize: "10",
        keyWord: ""
      };
      GetManagementUserInfoAllInfo(p)
        .then(res => {
          if (res.data.code === "0") {
            this.$set(this, "listData", res.data.result);
            debugger;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="less">
.myRow {
  width: 100%;
  margin: 0px 0px 10px;
  display: flex;
  justify-content: space-between;
}
.myButton {
  margin-right: 6px;
}
.footPage {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}
</style>
